<template>
  <el-card class="box-card">
    <my-bread level1="商品管理" level2="商品列表"></my-bread>
    <!--添加商品信息-->
    <el-alert class="alert" title="添加商品信息" type="success" center show-icon> </el-alert>
    <!--进度条-->
    <el-steps :active="1*active" align-center>
      <el-step title="基本信息"> </el-step>
      <el-step title="商品参数"> </el-step>
      <el-step title="商品属性"> </el-step>
      <el-step title="商品图片"> </el-step>
      <el-step title="商品内容"> </el-step>
    </el-steps>
    <!--tabs标签页-->
 <el-form class="form" label-position="top">
    <el-tabs tab-position="left" v-model="active" @tab-click="tabChange()">
        <el-tab-pane name="1" label="基本信息">
            <el-form-item label="商品名称">
                <el-input v-model="form.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="form.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量">
                <el-input v-model="form.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量">
                <el-input v-model="form.goods_number"></el-input>
            </el-form-item>
            
            <el-form-item label="商品分类">

                <el-cascader
                expand-trigger="hover"
                :options="goodslist"
                :props="defaultProps"
                v-model="selectedOptions"
                @change="handleChange">
              </el-cascader>

            </el-form-item>

        </el-tab-pane>
        <el-tab-pane name="2" label="商品参数">

            <el-form-item :label="item1.attr_name" v-for="(item1,i) in arrDyparams" :key="i">
                <el-checkbox-group v-model="item1.attr_vals" >
                    <el-checkbox border v-for="(item2,i) in item1.attr_vals" :key="i" :label="item2"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

        </el-tab-pane>
        <el-tab-pane name="3" label="商品属性">
            <el-form-item :label="item.attr_name" v-for="(item,i) in stateDyparams" :key="i">
                <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
        </el-tab-pane>
        <el-tab-pane name="4" label="商品图片">
            <el-upload
              class="upload-demo"
              action="http://localhost:8888/api/private/v1/upload"
              :headers="headers"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-tab-pane>
        <el-tab-pane name="5" label="商品内容">
            <el-button type="primary" @click="addGood()">添加商品</el-button>
            <!-- 富文本编辑器 -->
            <quill-editor v-model="form.goods_introduce"></quill-editor>
        </el-tab-pane>
    </el-tabs>
    
 </el-form>


  </el-card>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {
    quillEditor
} from 'vue-quill-editor'


export default {
    components: {
        quillEditor
    },
    data(){
        return {
            active:'1',
            form:{
                goods_name:'',
                goods_cat:'',
                goods_price:'',
                goods_number:'',
                goods_weight:'',
                goods_introduce:'',
                pics:[],
                attrs:''
            },
            goodslist:[],
            defaultProps:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            selectedOptions:[1,3,6],
            //动态参数的数据
            arrDyparams:[],
            stateDyparams:[],
            // 图片上传
            headers: {
                Authorization: localStorage.getItem('token')
            }
        }
    },
    created(){
        this.getGoodsList()
    },
    methods:{
     async addGood(){
        this.form.goods_cat = this.selectedOptions.join(',')
      const dy = this.arrDyparams
      const st = this.stateDyparams
      const arr1 = dy.map((item) => {
        
        return {attr_id: item.attr_id, attr_value: item.attr_vals}
      });
      const arr2 = st.map((item) => {
       
        return {attr_id: item.attr_id, attr_value: item.attr_vals}
      });
      this.form.attrs = [...arr1, ...arr2]
      console.log(this.form.attrs)
      const {data: {meta: {status, msg}}} = await this.$http.post('goods', this.form)
      if (status === 201) {
        this.$message.success(msg)
        this.$router.push({
          name: 'goods'
        })
      } else {
        this.$message.error(msg)
      }
    },
    handleRemove (file, fileList) {
      const index = this.form.pics.findIndex((item) => {
        return item.pic === file.response.data.tem_path
      })
      this.form.pics.splice(index, 1)
      // console.log(this.form)
    },
    handleSuccess (response, file, fileList) {
      const { meta } = response

      if (meta.status === 200) {
        this.$message.success('图片上传成功')
        this.form.pics.push({
          pic: response.data.tmp_path
        })
      } else {
        this.$message.error(meta.msg)
      }
    },
       async getGoodsList(){
            const res = await this.$http.get(`categories?type=3`)
            this.goodslist =res.data.data; 
            //console.log(res)
            
        },
        handleChange(value) {
            console.log(value);
        },
        async tabChange(tab,event){
            if (this.selectedOptions.length !== 3) {
                this.$message.warning('请先选择三级分类')
                return
            }

            if(this.active === '2'){
                const res =
                    await this.$http.get(`categories/${this.selectedOptions[2]}/attributes?sel=many`)
               
                this.arrDyparams = res.data.data
                this.arrDyparams.forEach((item) => {
                    item.attr_vals =
                        item.attr_vals.trim().length === 0 ?
                        [] : item.attr_vals.trim().split(',')
                    
                })


            }else if(this.active === '3'){
                const res =
                    await this.$http.get(`categories/${this.selectedOptions[2]}/attributes?sel=only`)
                //console.log(res);

                this.stateDyparams = res.data.data;
            }


        }
    }
}
</script>

<style>

.box-card{
    height:100%;
}
.alert{
    margin: 20px 0;
}
.form{
    height: 380px;
    overflow: auto;
}
.ql-editor {
    min-height: 300px;
}

</style>
